<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--  带标签和提示的输入框-->
  <h3>带标签和提示的输入框</h3>
  <label style="width: 100px;display: inline-block">用户名：</label><input type="text">
  <br>
  <label style="width: 100px;display: inline-block">密码：</label><input type="text">

<!--  自定义输入框-->
  <myinput label="用户名" label-width="150px"></myinput>
  <myinput label="密码"></myinput>
</div>
<script>

  Vue.component("myinput",{
    template:`
      <div>
        <label style="display: inline-block;"
        :style="{width: this.labelWidth || '100px'}">
            {{label}} :
        </label>
        <input>
      </div>
      `,
      //定义组件属性，同样不能用驼峰命名法，数组或对象
      //vue的组件属性是只读的
      props:["label","label-width"]
  })



  var v= new Vue({
    el:"#app",
  });
</script>
</body>
</html>